/** @jsxImportSource @emotion/react */
import * as React from "react";
import {CCell, TableRow, Text, useTheme,} from "customize-easy-ui-component";
import { DirectLink,} from "../../routing/Link";
import {multilines2Html, } from "../tools";


/**设备概况,格式化版本原始记录：适合1-2俩列的设备概况布局。
 * 原来的 return <> {  不能够支持点击出发。
 * */
export const TwoRaftDeviceInfo = ({orc,rep, repId, verId, config,tag}: {
  orc: any,
  rep: any,
  tag?: string,
  repId?: string,
  verId?: string,
  config: any[][][]
  }
) => {
  const theme = useTheme();
  //上级组件若嵌套<DirectLink 也无法渗透 config?.map < />；
  return <>
    <DirectLink  href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/${tag??'CertificateSummary'}`}>
      {
        config?.map(([[desc,name,cb],add2p] : any, i:number)=> {
          const [desc2,name2,cb2]= add2p||[];
          //<CCell colSpan={desc2? 1 : 3}>{typeof desc==='string'? name: desc?.view(orc)}</CCell>  '见附录13'
          //附加单位的两个形式：第三位置自带单位的， 或第二对象内部u字段指明单位。
          // console.log("检验设备情况3 faxian=", name2,'sdfds',typeof orc?.[name2]);
          const tailUnit1=typeof cb==='string'? cb : (typeof name==='object' && name.u)? name.u:undefined;
          const txtnode1=cb&&cb.view? cb.view(orc) :
              typeof name==='string'? (name?.startsWith('_$')? orc?.[name.substring(2)] : orc?.[name]) :
                  name.r? name.r :
                      name.t==='b'? (orc?.[name.n]? '是':'否') :
                          name.t==='m'? <div css={{textAlign: 'left'}}>
                                {multilines2Html(orc?.[name.n],  (txt,i)=>{
                                  return <React.Fragment key={i}>{(i!==0)&&<br/>}<Text>{txt}</Text></React.Fragment>
                                })}</div>  :
                              orc?.[name.n];
          const tailUnit2=!desc2? undefined :
              typeof cb2==='string'? cb2 : (typeof name2==='object' && name2.u)? name2.u:undefined;
          const txtnode2=!desc2? undefined :
              cb2&&cb2.view? cb2.view(orc) :
                  typeof name2==='string'? (name2?.startsWith('_$')? orc?.[name2.substring(2)] : orc?.[name2]) :
                      name2.r? name2.r :
                          name2.t==='b'? (orc?.[name2.n]? '是':'否') :
                              orc?.[name2.n];

          return (<TableRow key={i}>
            <CCell>{typeof desc==='string'? desc: desc?.view(orc)}</CCell>
            { tailUnit1?
                <CCell colSpan={desc2? 1 : 3}><div css={{ display: 'flex',justifyContent: 'space-around',alignItems: 'center'}}>
                  <Text >{txtnode1}</Text>
                  <Text css={{ [theme.mediaQueries.lg+', print']: {wordBreak: 'keep-all'} }}>{tailUnit1}</Text>
                </div></CCell>
                :
                <CCell colSpan={desc2? 1 : 3}>{txtnode1}</CCell>
            }
            {desc2 && <>
              <CCell>{desc2}</CCell>
              { tailUnit2?
                  <CCell><div css={{ display: 'flex',justifyContent: 'space-around',alignItems: 'center'}}>
                    <Text >{txtnode2}</Text>
                    <Text css={{ [theme.mediaQueries.lg+', print']: {wordBreak: 'keep-all'} }}>{tailUnit2}</Text>
                  </div></CCell>
                  :
                  <CCell>{txtnode2}</CCell>
              }
            </>
            }
          </TableRow>);
        })
      }
    </DirectLink>
  </>;
};
